<template>
  <!-- nav栏 -->
  <el-menu :default-active="activeIndex" class="el-menu-wrap" mode="horizontal">
    <template v-for="item in menuList" :key="item.id">
      <el-menu-item :index="item.id + ''" @click="handleItemClick(item)"
        >{{ item.title }}<span v-if="item.num || item.num === 0">{{ item.num }}</span></el-menu-item
      >
    </template>

    <el-sub-menu index="6">
      <template #title>创建者</template>
      <template v-for="item in userlistData" :key="item.id">
        <el-menu-item :index="'6-' + item.id" @click="handleItemClick(item)">
          <div class="person-list">
            <el-avatar
              size="small"
              :src="
                item.avatar
                  ? item.avatar
                  : 'https://openim-1309784708.cos.ap-shanghai.myqcloud.com/4ce4fccbca32722fdd9d41acb48ef409.jpg'
              "
            />
            <span class="name">{{ item.userName }}</span>
          </div>
        </el-menu-item>
      </template>
    </el-sub-menu>

    <el-sub-menu index="7">
      <template #title>优先级</template>
      <template v-for="item in optPriority" :key="item.id">
        <el-menu-item :index="'7-' + item.id" @click="handleItemClick(item)">
          <div class="priority-box">
            <span>{{ item.title }}</span>
            <div class="icon-box" :style="{ background: item.iconColor }"></div>
          </div>
        </el-menu-item>
      </template>
    </el-sub-menu>

    <el-menu-item @click="onClick" index="8">统计排名</el-menu-item>
  </el-menu>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue'

import { store } from '@/store/issues'
import { userStore } from '@/store/user'
import { storeToRefs } from 'pinia'
import { useRouter } from 'vue-router'

const issueStore = store()
const { userList, listData } = storeToRefs(issueStore)
const dataList = ref()

/**
 * @desc:获取人员信息
 * @param {*}
 */
const userData = userStore()
userData.getUserData()
const { userlistData } = storeToRefs(userData)

const menuList = ref([
  { id: '1', title: '全部' },
  { id: '2', title: '待办的', num: listData.value.todoListData.length },
  { id: '3', title: '进行中', num: listData.value.doingListData.length },
  { id: '4', title: '已完成', num: listData.value.doneListData.length },
  { id: '5', title: '已拒绝', num: listData.value.refuseListData.length }
])
const optPriority = ref([
  { id: '1', title: '不指定', iconColor: '#B0B0B0' },
  { id: '2', title: '严重', iconColor: '#EF0016' },
  { id: '3', title: '主要', iconColor: '#FF8F00' },
  { id: '4', title: '次要', iconColor: '#008AFF' },
  { id: '5', title: '不重要', iconColor: '#73E06F' }
])
/**
 * @desc: menu筛选
 * @return {*}
 */
const activeIndex = ref('1')
// const search = ref<Isearch[]>()
const emit = defineEmits(['send-item-click'])
const handleItemClick = (item: {
  iconColor?: string
  title: string
  userName?: string
  id?: number
  num: number
}) => {
  let params = {}
  if (item.iconColor) {
    params = {
      priority: item.title,
      pageNum: 1,
      pageSize: 10
    }
  } else if (item.userName) {
    params = {
      user_id: item.id,
      pageNum: 1,
      pageSize: 10
    }
  } else {
    params = {
      is_status: item.title,
      pageNum: 1,
      pageSize: 10
    }
  }
  emit('send-item-click', params)
}

/**
 * @desc: 跳转到统计排名
 * @return {*}
 */
const $router = useRouter()
const onClick = () => {
  $router.push({ name: 'Statistical' })
}
</script>

<style lang="less" scoped>
.el-menu-wrap {
  span {
    padding-left: 3px;
    transform: translateY(1px);
  }
}
.person-list {
  display: flex !important;
  align-items: center;
  .name {
    padding-left: 10px;
  }
}

.priority-box {
  span {
    padding-left: 30px;
  }
  .icon-box {
    position: absolute;
    top: 10px;
    left: 20px;
    width: 15px;
    height: 15px;
    border-radius: 20px;
  }
}
</style>
